<template>
  <div>
    <h6 class="pie_title">
      <img src="@/assets/images/shu_03.jpg" alt />
      <span>项目公司疫情概览</span>
    </h6>
    <div id="chartStandoc" style="width: 100%;height:200px;"></div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/epidemicrisk/epidemicrisk_pie.scss";
</style>
<script>
import { projectepidemicriskpie } from "@/service/epidemicrisk/index.js";
export default {
  mounted() {
    this.drawStandoc();
  },
  methods: {
    drawStandoc() {
      // 基于准备好的dom，初始化echarts实例
      let myChartStandoc = this.$echarts.init(
        document.getElementById("chartStandoc")
      );
      var userId = 1;
      projectepidemicriskpie(userId).then(res => {
        // window.console.log(res);
        myChartStandoc.setOption({
          /*title : {
            text: '历史空气质量分析',
            subtext: '',
            x:'center'
          },*/
          tooltip: {
            //提示框组件
            trigger: "item", //触发类型，在饼形图中为item
            formatter: "{a} <br/>{b} : {c} ({d}%)" //提示内容格式
          },
          legend: {
            orient: "vertical",
            left: "65%",
            top: "30%",
            data: res.data.obj.prjPrenNames
          },
          series: [
            //series数据系列
            {
              name: "占比",
              type: "pie", //饼形图
              radius: "70%",
              center: ["40%", "50%"], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              data: res.data.obj.prjPrenCount,
              label: {
                normal: {
                  show: true,
                  formatter: "{b} : {c}", //提示内容格式
                  position: ""
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    // fontSize: "16",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          ]
        });
      });
    }
  }
};
</script>